<template>
  <n-data-table
    :columns="columns"
    :data="data"
    :pagination="pagination"
    :loading="loading"
  />
</template>

<script setup>
  import { onMounted } from "vue";
  import { NDataTable } from 'naive-ui';
  import lodash from "lodash";
  import User from 'apis/user';
  import DayJs from 'dayjs';

  let loading = $ref(true);
  let columns = $ref([
    {
      title: "用户名",
      key: "UserName",
    },
    {
      title: "签到时间",
      key: "AttendanceTime",
    },
  ]);

  let data = $ref([]);
  const AllAttendance = {};

  const pagination = $ref({
    pageSize: 10,
    showSizePicker: true,
    pageSizes: [10, 15, 20],
    prefix: pageinfo => {
      return `第${pageinfo.page}页，共${pageinfo.pageCount}页`;
    },
    onChange: page => {
      pagination.page = page;
    },
    onUpdatePageSize: pageSize => {
      pagination.pageSize = pageSize;
      pagination.page = 1;
    },
  });

  onMounted(async () => {
    await User.getAllAttendance({}).then(result => {
      AllAttendance.total = result.count;
      AllAttendance.rows = [];
      for (let rowItem of result.rows) {
        AllAttendance.rows = lodash.concat(AllAttendance.rows, {
          key: rowItem.ID,
          UserName: rowItem.UserName,
          AttendanceTime: DayJs(rowItem.AttendanceTime).format("YYYY-M-D HH:mm:ss"),
        });
      }
      loading = false;
      data = AllAttendance.rows;
    });
  });
</script>

<style scoped>
</style>
